Gauge for WinRT
Customizing the Pointer's Appearance
Gauges for WinRT > Gauges for WinRT Task-Based Help > Customizing the Pointer's Appearance

By default, the C1GaugePointer appears as a tapered brown rectangle and the pointer cap appears as a gray circle with a gradient. You can customize the appearance of both. In the following steps, you'll customize the appearance of the C1RadialGauge control's C1GaugePointer and C1RadialGauge.PointerCap.

Complete the following steps:

  1. Click once on the C1RadialGauge control to select it.
  2. Switch to XAML view and add PointerFill="SkyBlue"
    PointerStroke="CornflowerBlue" to the <Gauge:C1RadialGauge> tag so that it appears similar to the following:
Markup
Copy Code 
<Gauge:C1RadialGauge Height="226" Margin="22,24,0,12" Name="C1RadialGauge1" Width="256" PointerFill="SkyBlue" PointerStroke="CornflowerBlue">
</Gauge:C1RadialGauge>

This will set customize the color of the C1GaugePointer.

  1. In XAML view add PointerCapStroke="CornflowerBlue" to the <Gauge:C1RadialGauge> tag so that it appears similar to the following:
Markup
Copy Code 
<Gauge:C1RadialGauge Height="226" Margin="22,24,0,12" Name="C1RadialGauge1" Width="256" PointerFill="SkyBlue" PointerCapStroke="CornflowerBlue" PointerStroke="CornflowerBlue">
</Gauge:C1RadialGauge>

This will customize the color that the C1RadialGauge.PointerCap is outlined in.

  1. In XAML view add the following <Gauge:C1RadialGauge.PointerCapFill> markup to the <Gauge:C1RadialGauge> tag so that it appears similar to the following:
Markup
Copy Code 
<Gauge:C1RadialGauge Height="226" Margin="22,24,0,12" Name="C1RadialGauge1" Width="256" PointerFill="SkyBlue" PointerCapStroke="CornflowerBlue" PointerStroke="CornflowerBlue" >
    <Gauge:C1RadialGauge.PointerCapFill>
        <RadialGradientBrush>
            <GradientStop Color="CornflowerBlue" Offset="0"/>
            <GradientStop Color="SkyBlue" Offset="1"/>
        </RadialGradientBrush>
    </Gauge:C1RadialGauge.PointerCapFill>
</Gauge:C1RadialGauge>

This will add a radial gradient to the C1RadialGauge control's C1RadialGauge.PointerCap.

Run your project and observe:

The C1RadialGauge control appears with a customized C1GaugePointer and C1RadialGauge.PointerCap:

 


 

 

Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback